import styles from "./StartHomeAppView.module.css";
import {Box, Fab, IconButton, useTheme} from "@mui/material";
import {Outlet, useNavigate} from "react-router-dom";
import {useEffect, useRef, useState} from "react";
import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
import DGActionBar from "../../components/DGActionBar/DGActionBar.tsx";
import {Settings} from "@mui/icons-material";
import HomeMenu from "./components/HomeMenu.tsx";
import DGDrawerAction from "../../components/DGDrawerAction.tsx";
import MenuIcon from "@mui/icons-material/Menu";
import AppProvider from "../../sources/AppProvider.ts";
import DGFadeView from "../../components/DGFadeView.tsx";
// import DGAlertText from "../../components/DGAlertText.tsx";
import {Util} from "../../sources/Util.ts";

const StartHomeAppView = () => {
    // 查询模式
    const m = useTheme().palette.mode === "light";
    // 路由跳转
    const router = useNavigate();
    // 滚动布局
    const ScrollViewRef = useRef<HTMLElement>();
    // 控制向上按钮状态
    const [top, setTop] = useState(false);
    // 全局上下文
    const App = AppProvider.useAppContext();

    // 悬浮按钮向上
    const handleTop = () => {
        if (ScrollViewRef && ScrollViewRef.current) ScrollViewRef.current.scrollTo({top: 0});
    }

    // 检测滚动状态
    useEffect(() => {
        // 获取的的值
        const current = ScrollViewRef.current;
        //  页面滚动函数
        const handleScroll = () => {
            // 判断是否不等于 null 或者 undefined
            if (ScrollViewRef && ScrollViewRef.current) {
                // 滑动的高度
                const top = ScrollViewRef.current.scrollTop;
                // 当前窗口可见高度
                const clientHeight = document.documentElement.clientHeight;
                // content 全高度
                if (top > clientHeight / 10) setTop(true); else setTop(false);
            }
        }
        if (current) current.addEventListener("scroll", handleScroll);
        return () => {
            if (current) current.removeEventListener("scroll", handleScroll);
        };
    }, [ScrollViewRef]);


    // 检测路由改动
    useEffect(() => {
        if (ScrollViewRef && ScrollViewRef.current) ScrollViewRef.current.scrollTo({top: 0})
    }, []);
    // 存储本地路径
    useEffect(() => Util.Storage.setSession("HOME", "/"), []);

    return (<DGFadeView time={500} className={`${styles.StartHomeAppView} ${m ? styles.light : styles.dark}`}>
        {/* 悬浮按钮 */}
        <Fab className={`${styles.Fab} ${top ? styles.active : ''}`} onClick={handleTop} id="goTop"
             aria-label="goTop">
            <KeyboardArrowUpIcon/>
        </Fab>
        {/* 主内容 */}
        <Box className={styles.Content}>
            {/* 左侧面板 */}
            <Box className={styles.left}>
                {/* 桌面端顶部导航栏 */}
                <DGActionBar logo="逐梦园" title="逐梦园">
                    <IconButton
                        color="inherit" id="settings" aria-label="settings"
                        onClick={() => router("settings", {replace: true})}>
                        <Settings/>
                    </IconButton>
                </DGActionBar>
                {/* 桌面端菜单栏 */}
                <HomeMenu/>
            </Box>
            {/* 右侧面板 */}
            <Box className={styles.right}>
                {/* 移动端适配侧滑栏 */}
                <DGDrawerAction icon={<MenuIcon/>} title={App && App.title}><HomeMenu/></DGDrawerAction>

                {/* 内容区域 */}
                <Box className={styles.rightContent} ref={ScrollViewRef}>
                    {/*<DGAlertText severity="warning" style={{margin: "15px"}}>*/}
                    {/*    暂不允许连接服务器，请等待项目开发完成。*/}
                    {/*</DGAlertText>*/}
                    <Outlet/>
                </Box>
            </Box>
        </Box>
    </DGFadeView>);
}

export default StartHomeAppView;